<template>
    <div class="user-password-find">
        <div class="big-title">请先完成个人信息验证</div>

        <ul class="form-box">
            <li class="form__item detail">
                <span class="form__key">真实姓名</span>
                <div class="form__value">
                    <input v-model='name' type="text" placeholder="请输入姓名">
                </div>
            </li>
            <li class="form__item">
                <span class="form__key">身份证号</span>
                <div class="form__value">
                    <input v-model='idNumber' type="text" placeholder="请输入身份证号">
                </div>
            </li>
            <li class="form__item detail">
                <span class="form__key">新的交易密码</span>
                <div class="form__value">
                    <input v-model='newPassword' type="password" placeholder="请输入新的交易密码">
                </div>
            </li>
            <li class="form__item">
                <span class="form__key">新的交易密码确认</span>
                <div class="form__value">
                    <input v-model='confirmPassword' type="password" placeholder="请再次输入交易密码">
                </div>
            </li>
        </ul>

        <ul class="form-box">
            <li class="form__item disabled">
                <span class="form__key">绑定手机号</span>
                <div class="form__value">
                    <span class="item">{{userInfo.user.mobile | mobile}}</span>
                </div>
            </li>
            <li class="form__item">
                <span class="form__key">验证码</span>
                <div class="form__value">
                    <input v-model='smsCode' type="text" placeholder="请输入验证码">
                </div>
            </li>
        </ul>
        <verification-code v-model='sent' @click='getCode'></verification-code>

        <span class="button long confirm" @click='reset'>提交</span>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import verificationCode from '../components/VerificationCode.vue'
    import mobile from '../filters/filter-mobile'
    import  { mapGetters, mapActions }  from 'vuex'
    import { findTransactionPasswordValidation } from '../validation/validation'
    import { userApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            verificationCode,
        },
        filters:{
            mobile
        },
        data() {
            return {
                sent:false,
                mobile:'',
                name:'',
                idNumber:'',
                newPassword:'',
                confirmPassword:'',
                smsCode:'',
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            userInfo(){
                return this.localInfo.userInfo
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            // filters
            // function
            goRouter(name){
                this.$router.push({
                    name:name
                })
            },

            reset(){
                let params = {
                    name:this.name,
                    idNumber:this.idNumber,
                    newPassword:this.newPassword,
                    confirmPassword:this.confirmPassword,
                    smsCode:this.smsCode,
                }

            },
            getCode(){
                this.showLoading()

                userApi.sendSms({
                    mobile:this.mobile,
                    type:'FORGOT_TRADE_PASSWORD'
                })
                .then(result=>{
                    this.sent = true
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.sent = false
                    this.hideLoading()
                })
            },
            reset(){
                let params = {
                    name:this.name,
                    smsCode:this.smsCode,
                    newPassword:this.newPassword,
                    confirmPassword:this.confirmPassword,
                    idNumber:this.idNumber,
                }
                if(!findTransactionPasswordValidation(params)) return
                this.showLoading()
                userApi.forgotTradePassword(params)
                .then(result=>{
                    this.setMsgTip({
                        text:'重置交易密码成功!',
                        type:'success'
                    })
                    this.hideLoading()
                    history.go(-1)
                })
                .catch(error => {
                    this.hideLoading()
                })
            },
        },
        created(){
            this.mobile = this.userInfo.user.mobile
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-password-find{
        .tips{
            @extend %font-caption;
            padding: 8px 24px;
        }
        .form-box{
            margin-top: 0;
            margin-bottom: 16px;
            &:last-child{
                margin-bottom: 8px;
            }
        }
        .modal-password-auth{
            .component-modal__main{
                padding-left:16px;
                padding-right:16px;
            }
        }
        .modal-password-auth__title{
            @extend %font-title;
            color:$importColor;
            text-align: center;
        }
        .modal-password-auth__input{
            padding: 24px 0;
            input{
                @extend %font-subhead;
                width: 100%;
                box-sizing: border-box;
                padding:14px 16px;
                background-color: $backgroundColor;
                border: 1px solid $sectionColor;
            }
        }
        .modal-password-auth__button{
            display: flex;
            justify-content: flex-end;
            .button{
                margin-left:16px;
                &:first-child{
                    margin-left: 0;
                }
            }
        }
    }

</style>
